¿Qué estoy tratando de hacer?
Detenga las re-renderizaciones al ajustar el estado de un objeto cuando actualizo solo un valor y los otros valores permanecen intactos.
¿Cuál es el código que actualmente intenta hacer eso?
El componente front-end que representa la información:
export default function ReactComponent() { const [characterState, setCharacterState] = useState(data.character); useEffect(() => { socket.emit("/character/read"); socket.on("/character/read", function (data) { if (data.status === "SUCCESS") { setCharacterState(data); } }); return () => { socket.off("/character/read"); }; }, []); return ( <div> Name: {characterState.name} Stand: {characterState.stand} Status: {characterState.status} </div> ) } La información de back-end .json como "datos" y también lo que setCharacterInfo guarda en characterInfo :
{ status: "SUCCESS" character: {name: "Dio", stand: "The World", status: "Alive"}; }¿Cuál espero que sea el resultado?
Si el back-end envía algo nuevo en "/character/read", diga:
// Status is now "Dead". { status: "SUCCESS" character: {name: "Dio", stand: "The World", status: "Dead"}; }Espero en la función Reaccionar solo volver a representar el estado.
¿Cuál es el resultado real?
Todo el estado se vuelve a representar (visible para ver el ajuste de los valores), a pesar de que los otros valores en el objeto no se actualizan.
¿Cuál creo que podría ser el problema?
Creo que tiene que ver con "useState", que a "useState" no le importa si hay algunos valores cambiados, todos cambiados o sin cambios, "useState" siempre volverá a representar lo que se le dé. Estoy pensando que una posible solución sería hacer 3 estados separados para "characterName", "characterStand" y "characterStatus", pero buscando si hay otra alternativa al intento probado de 1 estado solamente.
EDITAR:
No pude transmitir lo que estaba tratando de lograr, pero lo que dijo Sajeeb era lo que finalmente estaba buscando.
Si el atributo, en este caso "characterState.status", cambia, espero una nueva representación en "characterState.status" y no en "characterState.name" ni "characterState.stand" . Debido al comportamiento predeterminado de React, todos estos atributos en 1 estado harán que cada uno de ellos se vuelva a representar porque el estado "characterState" en sí mismo se actualizó.
Gracias por su ayuda a todos.
De hecho, te recomiendo que lo dejes como está.
Razonamiento:
Lo que tienes ahora:
Dado que sus datos almacenados en characterState son tan pequeños, realmente no tendría ningún sentido dividirlos o preocuparse por una posible nueva representación.
En cualquier otro caso, terminará con un código menos limpio y con menos rendimiento.
Por ejemplo, si intenta dividirlo en tres useState s en un componente, ahora tiene 3 estados para administrar y no ha resuelto sus problemas con los renderizados.
Si usó tres componentes diferentes para los estados, tendría :
Y código menos limpio.
Todo por resolver un problema que en realidad no es un problema.
En el caso proporcionado por usted, sin duda recomendaría dejarlo como está.
A menos que tenga una razón muy específica por la cual esto no funcionaría bien.
Está utilizando 1 variable de estado que almacena un diccionario de 3 valores , no 3 variables de estado diferentes. Entonces, cuando llame a la función de actualización de estado, cambiará ese estado 1 que es un diccionario, en lugar de cambiar solo una propiedad de la variable de estado.
La única solución es, como ya lo ha hecho, crear variables de estado separadas.
Cheerio!
Editar: debe tenerse en cuenta que, a pesar de dividir las variables de estado, todo el componente se volverá a representar cada vez que cambie un estado, por lo que 3 variables de estado diferentes no evitarán que se actualice todo el componente. Le sugiero que escriba un componente diferente para mostrar el nombre, el soporte y el estado por separado, de modo que cuando los accesorios pasen a un componente secundario en particular cambien (por ejemplo, Estado), solo ese componente se actualice.
Editar: todavía me estoy riendo de la referencia de JoJo jajaja.